<template>
    <el-table ref="receipt" :data="receiptData" border class="table" header-cell-class-name="table-header">
        <el-table-column prop="id" width="65" label="序号" align="center"></el-table-column>
        <el-table-column sortable prop="sample_id" label="样品编号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column sortable prop="current_amount" label="原始库存量" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column sortable prop="disp_amount" label="分装库存量" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column sortable prop="receipt_amount" label="领用数量" align="center" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="size" label="规格" align="center" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="reason" label="领用目的" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="project_id" label="项目号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="locale" label="储存位置" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="service" label="检测项目" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="extra_infos" label="备注" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="dflag" label="分装领用" align="center" show-overflow-tooltip>
            <template #default="scope">
                <el-tag v-if="scope.row.dflag===true" type="success">是</el-tag>
                <el-tag v-if="scope.row.dflag===false" type="warning">否</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" show-overflow-tooltip>
            <template #default="scope">
                <el-button
                    type="primary"
                    size="small"
                    :icon="Edit"
                    @click="handleEdit(scope.$index,scope.row)"
                    v-permiss="15"
                >
                    编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog 
        draggable 
        title="样品编辑" 
        v-model="editVisible" 
        destroy-on-close
        :close-on-click-modal="false"
        @close="closeDialog()"
    >
        <SampleReceiptEdit :data='rowData' :edit="idEdit" :update="update" />
    </el-dialog>
    <div class="dialog-footer">
        <el-button type="success" :icon="Upload" @click="submitForm()">
            提交领用单
        </el-button>
    </div>
</template>

<script setup lang="ts">
import { reactive,ref } from "vue"
import { Edit,Upload } from '@element-plus/icons-vue'
import SampleReceiptEdit from './sample_receipt_edit.vue'
import { ElMessageBox,ElMessage } from "element-plus"
import useService from "../../hooks/Service/useService"
const { postService } = useService()
/* 参数传输 */
const props = defineProps({
    form:{
        type:Object,
        required:true
    },
    closeSampledialog: {
        type:Function,
        required:true
    }
})
// 获取表格数据                                                                                                                                                                           
interface TableItem { 
    id: number;
	client_id: string;
	sample_id: string;
	sample_name: string;
	lot_number: string;
	size: string;
	sample_amount: number;
	current_amount: number;
	disp_amount: number;
	disp_size: string;
	arrive_time: string;
	instock_time: string;
	create_time: string;
	status: number;
    project_id: string;
    amount: string;
    service: string;
    dflag: boolean;
    applicant: string;
}

const receiptData = ref([] as any)
receiptData.value=props.form
/* 表格赋值 */
// receiptData.value=props.form
/* 编辑领用单 */
const editVisible = ref(false);
let idx: number = -1;
const idEdit = ref(false);
const rowData = ref({});
const handleEdit = (index: number, row: TableItem) => {
    idx = index;
    editVisible.value = true;
    rowData.value = row;
    idEdit.value = true;
}

const closeDialog = () => {
	editVisible.value = false;
    idEdit.value = false;
}

const update = (row:TableItem) => {
    receiptData.value[idx] = row
    closeDialog()
}

let status=ref(0)
const submitForm = () => {
    ElMessageBox.confirm('确定要提交领用单吗？', '提示',{
        type: "success",
        draggable: true,
    }).then( () => {
        for(let index in receiptData.value){
            receiptData.value[index].applicant = localStorage.getItem("ms_username")
        }
        postService(receiptData.value).then(res=>{
            status.value=res.data["status"]
            if(status.value===202){
                ElMessage.success("提交成功！！")
                receiptData.value=null
            }else if(status.value=400){
                ElMessage.error("提交错误，表格不能有空值！！")
            }
        });
        props.closeSampledialog()
    }).catch(()=>{
    })
}

</script>

<style scoped>
.dialog-footer {
	margin-bottom: 10px;
	margin-top:10px;
    text-align:left;
}
</style>
